{extend name="index/index"}
{block name="body"}
<div id="app" class="aminui">
    <el-main>
        <el-card shadow="never">
            <el-tabs tab-position="top">
                <el-tab-pane label="系统设置">
                    <el-form ref="form" :model="sys" label-width="120px" style="margin-top: 10px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="登录表单标题" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                                
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="后台登录入口" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="JWT 接口密钥" style="width: 100%;">
                            <el-input v-model="sys.name"></el-input>
                        </el-form-item>
                        <el-form-item label="浏览器小图标" style="width: 100%;">
                            <el-input v-model="sys.name"></el-input>
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="网站名称" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="后台程序名称" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="后台程序版本" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="公网安备号" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="网站备案号" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="网站版权信息" style="width: 100%;">
                                    <el-input v-model="sys.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item>
                            <el-button type="primary">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="登录配置">
                    <el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
                        <sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="扩展配置">
                    <el-card shadow="never" header="运行模式 Run Mode">
                        <el-radio-group v-model="test">
                            <el-radio-button label="以开发模式运行"></el-radio-button>
                            <el-radio-button label="以生产模式运行"></el-radio-button>
                        </el-radio-group>
                        <div class="config-item">
                            <p><b>开发模式</b>：开发人员或在功能调试时使用，系统异常时会显示详细的错误信息，同时还会记录操作日志及数据库 SQL 语句信息。</p>
                            <p><b>生产模式</b>：项目正式部署上线后使用，系统异常时统一显示 “{:config('app.error_message')}”，只记录重要的异常日志信息，强烈推荐上线后使用此模式。</p>
                        </div>
                    </el-card>
                    <el-card shadow="never" header="文本编辑器 Text Editor" style="margin-top: 15px;">
                        <el-radio-group v-model="test1">
                            <el-radio-button label="CKEditor4"></el-radio-button>
                            <el-radio-button label="CKEditor5"></el-radio-button>
                            <el-radio-button label="自适应模式"></el-radio-button>
                        </el-radio-group>
                        <div class="config-item">
                            <p><b>CKEditor4</b>：旧版本编辑器，对浏览器兼容较好，但内容编辑体验稍有不足。</p>
                            <p><b>CKEditor5</b>：新版本编辑器，只支持新特性浏览器，对内容编辑体验较好，推荐使用。</p>
                            <p><b>自适应模式</b>：优先使用新版本编辑器，若浏览器不支持新版本时自动降级为旧版本编辑器。</p>
                        </div>
                    </el-card>
                    <el-card shadow="never" header="存储引擎 Storage Engine" style="margin-top: 15px;">
                        <el-radio-group v-model="test2">
                            <el-radio-button label="本地服务器存储"></el-radio-button>
                            <el-radio-button label="七牛云对象存储"></el-radio-button>
                            <el-radio-button label="又拍云USS存储"></el-radio-button>
                            <el-radio-button label="阿里云OSS存储"></el-radio-button>
                            <el-radio-button label="腾讯云COS存储"></el-radio-button>
                        </el-radio-group>
                        <div class="config-item">
                            <p><b>本地服务器存储</b>：文件直接上传到本地服务器的 `static/upload` 目录，不支持大文件上传，占用服务器磁盘空间，访问时消耗服务器带宽流量。</p>
                            <p><b>七牛云对象存储</b>：文件直接上传到七牛云存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
                            <p><b>又拍云USS存储</b>：文件直接上传到又拍云 USS 存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
                            <p><b>阿里云OSS存储</b>：文件直接上传到阿里云 OSS 存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
                            <p><b>腾讯云COS存储</b>：文件直接上传到腾讯云 COS 存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>
</div>
<script>
    const App = {
        data() {
            return {
                test: 'test',
            };
        },
    }
</script>
{/block}